<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>轮播图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
 
    .box {
      width: 566px;
      height: 333px;
      overflow: hidden;
      margin: 100px auto;
      position: relative;
    }
 
    .box>img {
      width: 566px;
      height: 333px;
    }
 
    ul {
      position: absolute;
      list-style: none;
      overflow: hidden;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
    }
 
    li {
      float: left;
      width: 10px;
      height: 10px;
      background-color: papayawhip;
      border-radius: 50%;
      color: powderblue;
      margin-left: 10px;
    }
  </style>
</head>
 
<body>
  <div class="box">
    <img src="https://img0.baidu.com/it/u=530426417,2082848644&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
    <img src="https://img0.baidu.com/it/u=3798217922,3880088897&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt="">
    <img src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" alt="">
    <img src="https://img1.baidu.com/it/u=700675537,3936578503&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
<script>
  var imgs = document.querySelectorAll(".box img");//获取到所有图片
  var btn = document.querySelectorAll(".box li");//获取小圆点
  // var ula = document.querySelector("ul");//获取小圆点
  var num = 0;
  btn[num].style.backgroundColor = "red";
  var timer = setInterval(roll, 2000)
  function roll() {
    num++;
    num >= imgs.length ? num = 0 : num = num;
    imgs.forEach((item, index) => {
      item.style.display = 'none'
      btn[index].style.background = 'papayawhip'
 
    })
    imgs[num].style.display = 'block' //显示相对应的图片
    btn[num].style.background = 'red'
  }
 
 
 
  btn.forEach(function (item, index) {
    item.onmouseenter = function () {
      // ula.style.display='block'
      clearInterval(timer)
      num = index - 1
      roll()
    }
    item.onmouseleave = function () {
      // ula.style.display='none'
      timer = setInterval(roll, 2000)
    }
  })
</script>
 
</html>